<!-- html代码 -->
<template>
    <div>
        <Title :title="title"></Title>
        <div ref="right2" style="height: 200px; margin-top: 15px;margin-right:15px"></div>
    </div>
</template>
<script>
import { Bar } from '@antv/g2plot';
import { get } from '../../utils/request';
export default {
    data() {
        return {
            title: '环境工程',
            valueData: [], 
            barChart: null, 
        };
    },
    methods: {
        loadBar() {
            this.barChart = new Bar(this.$refs.right2, {
                data: this.valueData, 
                xField: 'value', 
                yField: 'type', 
                legend: {
                    position: 'top', 
                },
                barStyle: (datum) => ({
                    fill: datum.value > 1 ? '#ffb6c1' : '#ccccff', 
                }),
                tooltip: {
                    domStyles: {
                        "g2-tooltip": {
                            backgroundColor: '#147',
                            color: 'white',
                            fontSize: 20
                        }
                    }
                },
                yAxis: {
                    label: {
                        style: {
                            fontSize: 15, 
                            fill: 'white', 
                        },
                        formatter: (text) => {
                            const maxLength = 4;
                            return text.length > maxLength
                                ? text.slice(0, maxLength) + '...'
                                : text;
                        }
                    },
                },
            }); 
            this.barChart.render();
        },
        async getValueData() {
                let res = await get('/dashboard/queryEngineerBindDeviceNumber');
                console.log(res, '获取响应');
                this.valueData = res.data; 
            }
        },
    async mounted() {
        await this.getValueData(); 
        this.loadBar();
    }
}
</script>
<!-- css代码 -->
<style lang="less" scoped>

</style>